<template>
  <div class="home">
    <el-row>
      <!-- 左边栏 -->      
      <el-col :span="12"><div class="grid-content bg-purple">
        <h1 style="text-align:center">今日成交详情</h1>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="今日订单" name="1">
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
          <el-collapse-item title="今日成交" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="今日上架" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="产品总数" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </div></el-col>
      <!-- 右边栏 -->
      <el-col :span="12"><div class="grid-content bg-purple-light">
        <h1 style="text-align:center">今日成交详情</h1>
        <p>今日访问量</p>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="70"></el-progress>
        <p>今日销售量</p>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="100" status="success"></el-progress>
        <p>今日成交额</p>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="80" status="warning"></el-progress>
        <p>今日最高订单</p>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
      </div></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name:'Home',
  data(){
    return {
      activeNames: ['1']
    }
  },
  methods:{
    handleChange(val) {
      
    }
  }
}
</script>
<style scoped>
.home{
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
  }
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 10px;
}
</style>